<template>
  <el-dialog custom-class="app_dialog" v-model="props.appDialog.visible" :width="props.appDialog.width" :before-close="handleClose">
    <template #title>
      <div class="dialog_header">{{ props.appDialog.title }}</div>
    </template>
    <section>
      <slot></slot>
    </section>
    <template #footer>
        <div class="footer">
            <div class="left_footer">
                已选择<span class="footer_color"> {{props.appDialog.customerLength}} </span>个客户
            </div>
            <div class="dialog_footer">
                <el-button v-if="props.appDialog.submit" 
                    :disabled="props.appDialog.isDisable"
                    :type="!props.appDialog.isDisable ? 'primary': 'info'" 
                    @click="props.appDialog.submit">{{ props.appDialog.submitText }}</el-button>
            </div>
        </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { defineProps, ref, reactive } from 'vue'
  interface Props {
    width?: '30%'
    visible: boolean
    title: string
    uploadShow?: boolean
    cancelText?: string
    saveText?: string
    submitText?: string
    isDisable?: boolean
    customerLength?: Number
    cancel?: () => void
    save?: () => void
    submit?: () => void
  }

  const props = defineProps<{
    appDialog: {
      type: Props,
      require: true
    }
  }>()

  const handleClose = (done: () => void) => {
    props.appDialog.cancel && props.appDialog.cancel()
    done()
  }

  const upload = (val: any) => {}
</script>
<style lang="scss">
  .app_dialog {
    .footer {
      display: flex;
      justify-content: space-between;
      .left_footer {
          color: #33302D;
          margin-top: 10px;
          .footer_color {
              color: #FF6B00;
          }
      }
    }
  }
</style>
